<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>潜在客户报表</title>
    <#include "../common/link.ftl"/>
    <script>
        $(function () {
            $(".chart_btn").click(function () {
                var keyword = $("#searchForm input[name=\"keyword\"]").val();
                var url = $(this).data("url")+"?" + $("#searchForm").serialize()+"&key="+keyword;
                var name = $(this).val("");
                // 使用弹窗显示图表数据
                //modal初始化和打开之前清除页面内容和缓存数据
                $("#chartModal .modal-content").empty();
                $("#chartModal").removeData('bs.modal').modal({
                    remote:url
                })
            })
        })
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<#include "../common/navbar.ftl" />
    <!--菜单回显-->
<#assign currentMenu="customerReport"/>
<#include "../common/menu.ftl" />
    <div class="content-wrapper">
        <section class="content-header">
            <h1>潜在客户报表</h1>
        </section>
        <section class="content">
            <div class="box">

                <div class="box">
                    <!--高级查询--->
                    <div style="margin: 10px;">
                        <!--高级查询--->
                        <form class="form-inline" id="searchForm" action="/customerReport/list" method="post">
                            <input type="hidden" name="currentPage" id="currentPage" value="1">
                            <div class="form-group">
                                <label for="keyword">员工姓名:</label>
                                <input type="text" class="form-control" id="keyword" name="keyword" value="${(qo.keyword)!}" placeholder="请输入姓名">
                            </div>
                            <div class="form-group">
                                <label for="date">时间段查询:</label>
                                <input type="text" class="form-control" style="width: 100px" id="beginTime" name="beginDate" onclick="WdatePicker()" value="${(qo.beginDate?string("yyyy-MM-dd"))!}"> -
                                <input type="text" class="form-control" style="width: 100px" id="endTime" name="endDate" onclick="WdatePicker()" value="${(qo.endDate?string("yyyy-MM-dd"))!}">
                            </div>
                            <div class="form-group">
                                <label for="status">分组类型:</label>
                                <select class="form-control" id="groupCondition" name="groupCondition">
                                    <option value="e.name" selected>
                                        员工
                                    </option>

                                    <option value="DATE_FORMAT(c.input_time, '%Y')">
                                        年
                                    </option>

                                    <option value="DATE_FORMAT(c.input_time, '%Y-%m')">
                                        月
                                    </option>

                                    <option value="date_format(c.input_time, '%y-%m-%d')">
                                        日
                                    </option>
                                </select>
                                <script>
                                    $("#groupCondition").val("${qo.groupCondition}");
                                </script>

                                <button id="btn_query" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-search"></span> 查询
                                </button>
                                <button type="button" class="btn btn-info chart_btn" data-url="/customerReport/chartByBar">
                                    <span class="glyphicon glyphicon-stats"></span> 柱状图
                                </button>
                                <button type="button" class="btn btn-warning chart_btn"  data-url="/customerReport/chartByPie">
                                    <span class="glyphicon glyphicon-dashboard"></span> 饼状图
                                </button>
                            </div>
                        </form>
                    </div>

                    <!--编写内容-->
                <div class="box-body table-responsive no-padding ">
                    <table class="table table-hover table-bordered" align="center">
                        <tr>
                            <th>分组类型</th>
                            <th>潜在客户新增数</th>
                        </tr>
                        <#list list as entry>
                            <tr>
                                <td>${entry.groupType}</td>
                                <td>${entry.groupNum}</td>
                            </tr>
                        </#list>
                    </table>

                </div>
            </div>
        </section>
    </div>
    <#include "../common/footer.ftl" />
</div>
<!-- Modal -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>


</body>
</html>
